<template>
  <div>
    <div v-if="this.imageList.length">
      <div class="d-flex flex-wrap">
        <div v-for="(img, index) in imageList" :key="index">
          <div class="img-card mr-2 mb-2" :style="imageSize" @click.stop="showLightbox(index)">
            <el-image :src="img" class="image" :style="imageSize" alt="" fit="cover">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline image-error"></i>
              </div>
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <span v-else v-html="emptyText"></span>
  </div>
</template>
<script>
import { arrayFromString } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    images: {
      type: [String, Array],
    },
    emptyText: String,
    showThumbs: Boolean,
    size: {
      type: Number,
      default: 108,
    },
  },
  data() {
    return {}
  },
  computed: {
    imageList() {
      if (typeof this.images === 'string') {
        return arrayFromString(this.images)
      } else if (Object.prototype.toString.call(this.images) === '[object Array]') {
        return this.images
      } else {
        return []
      }
    },
    imageProp() {
      return this.imageList.map(img => {
        return {
          url: img,
          name: '',
        }
      })
    },
    imageSize() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showLightbox(index) {
      this.$utils.viewer({
        images: this.imageProp,
        index,
      })
    },
  },
}
</script>
<style scoped lang="scss">
.img-card {
  border-radius: 0.15rem;
  border: 1px solid #dee2e6;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  > .image {
    max-width: 100%;
    object-fit: cover;
  }
}
.image-error {
  font-size: 30px;
  color: $gray-400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
